import React, {PureComponent} from "react";
import {Button, DatePicker, Form, Input, Select} from "antd";

class AddCarComponent extends PureComponent {

    render() {
        const {getFieldDecorator} = this.props.form;

        return (
            <Form>
                <Form.Item
                    label="手机号"
                >
                    {getFieldDecorator('phone', {
                        rules: [{
                            type: 'phone', message: 'The input is not valid phone!',
                        }, {
                            required: true, message: 'Please input phone',
                        }],
                    })(
                        <Input placeholder={"请输入手机号"}/>
                    )}
                </Form.Item>


                <Form.Item
                    label={"部门"}
                >

                    {getFieldDecorator('text', {
                        rules: [{
                            type: 'text', message: 'The input is not valid phone!',
                        }, {
                            required: true, message: 'Please input phone',
                        }],
                    })(
                        <Select placeholder={"请选择部门"}>
                            <Select.Option value={'第一个'}>第一个</Select.Option>
                            <Select.Option value={"第二个"}>第二个</Select.Option>
                        </Select>
                    )}

                </Form.Item>

                <Form.Item
                    label={"身份证"}
                >
                    <Input placeholder={"请输入你的身份证号"}/>
                </Form.Item>

                <Form.Item
                    label={"姓名"}
                >

                    {getFieldDecorator('text', {
                        rules: [{
                            type: 'text', message: 'The input is not valid 姓名!',
                        }, {
                            required: true, message: 'Please input 姓名',
                        }],
                    })(
                        <Input placeholder={"请输入你的姓名"}/>
                    )}
                </Form.Item>

                <Form.Item
                    label={"车牌号"}
                >
                    <Input placeholder={"车牌号"}/>
                </Form.Item>

                <Form.Item
                    label={"车辆信息"}
                >
                    <Input placeholder={"车辆信息"}/>
                </Form.Item>

                <Form.Item
                    label={"是否外包"}
                >
                    <Select>
                        <Select.Option value={'第一个'}>是</Select.Option>
                        <Select.Option value={"第二个"}>否</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    label={"电压容量"}
                >

                    {
                        getFieldDecorator(
                            'text', {
                                rules: [{
                                    required: true,message: '请输入电压容量',
                                }]
                            }
                        )(
                            <Select defaultValue={"36V"}>
                                <Select.Option value={'24V'}>24V</Select.Option>
                                <Select.Option value={"36V"}>36V</Select.Option>
                                <Select.Option value={"48V"}>48V</Select.Option>
                                <Select.Option value={"72V"}>72V</Select.Option>
                            </Select>
                        )

                    }


                </Form.Item>

                <Form.Item
                    label={"电流容量"}
                >

                    {
                        getFieldDecorator(
                            'text', {
                                rules: [{
                                    required: true,message: '请输入电流容量',
                                }]
                            }
                        )(
                            <Select defaultValue={"10AH"}>
                                <Select.Option value={'4AH'}>4AH</Select.Option>
                                <Select.Option value={'6AH'}>6AH</Select.Option>
                                <Select.Option value={'8AH'}>8AH</Select.Option>
                                <Select.Option value={'10AH'}>10AH</Select.Option>
                                <Select.Option value={'12AH'}>12AH</Select.Option>
                            </Select>
                        )

                    }

                </Form.Item>

                <Form.Item
                    label={"终端编号"}
                >

                    {
                        getFieldDecorator(
                            'text', {
                                rules: [{
                                    required: true,message: '请输入终端编号',
                                }]
                            }
                        )(
                            <Input placeholder={"请输入终端编号"}/>
                        )

                    }


                </Form.Item>
                <Form.Item
                    label={"购置日期"}
                >
                   <DatePicker/>
                </Form.Item>

                <Form.Item
                    label={"使用日期"}
                >
                   <DatePicker/>

                </Form.Item>

                <Form.Item
                    label={"温度上限"}
                >

                    <Input addonAfter="zz" defaultValue="mysite"/>
                </Form.Item>

                <Form.Item
                    label={"冗余时间"}
                >
                    <Input addonAfter="zz" defaultValue="mysite"/>
                </Form.Item>


                <Form.Item
                    label={"描述"}
                >
                   <Input.TextArea rows={3}/>
                </Form.Item>

                <Form.Item
                >
                    <Button htmlType={"button"}>确定</Button>
                    <Button htmlType={"button"}>取消</Button>
                </Form.Item>


            </Form>
        )
    }

}

const AddCarWrapperComponent = Form.create({})(AddCarComponent);

export default AddCarWrapperComponent;